<template>
    <el-tree-v2 ref="tree" :data="conslist" v-if="conslist.length && checkbox" :props="item.props" class="roletree" @check-change="changeFun" :show-checkbox="checkbox" :default-checked-keys="defaultArr">
        <template #default="{ node, data }">
            <div v-if="node.isLeaf" style="flex:1;">
                <div>{{ node.label }}</div>
                <div style="display: flex;flex-wrap: wrap;">
                    <el-checkbox :disabled="!checkbox" v-for="_item in data[item.key]" :key="_item.key" v-model="_item.checked" :label="_item.name" @change="danxuan(_item, data[item.key], data)">
                        {{ _item.name }}
                    </el-checkbox>
                </div>
            </div>
            <div v-else>
                <span>{{ node.label }}</span>
            </div>
        </template>
    </el-tree-v2>
    <el-tree-v2 ref="tree" :data="conslist" v-if="conslist.length && !checkbox" :props="item.props" class="roletree">
        <template #default="{ node, data }">
            <div v-if="node.isLeaf" style="flex:1;display: flex;flex-wrap: wrap;">
                <div style="width: 150px;">{{ node.label }}</div>
                <div>
                    <el-tag v-for="tag in data[item.key]" :key="tag" class="mx-1 invoice_tag" size="mini">
                        {{ tag.name }}
                    </el-tag>
                </div>
            </div>
            <div v-else>
                <span>{{ node.label }}</span>
            </div>
        </template>
    </el-tree-v2>
</template>

<script>
export default {
    props: {
        modelValue: { type: Array, default: () => [] },
        list: { type: Array, default: () => [] },
        item: { type: Object, default: () => ({}) },
        keys: { type: String, default: '' },
        checkbox: { type: Boolean, default: true }
    },
    data() {
        return {
            conslist: [],
            defaultArr: []
        }
    },
    mounted() {
        if (this.list.length) {
            this.conslist = this.list
        }
        if (this.modelValue.length) {
            this.conslist = this.modelValue
        }
        this.bianli(this.conslist)
    },
    methods: {
        changeFun(data, status) {
            if (data.permission) {
                data.permission.forEach(item => {
                    item.checked = status
                })
            }
            if (data.children) {
                data.checked = status
                data.children.forEach(item => {
                    this.changeFun(item, status)
                })
            }
            this.$emit('update:modelValue', this.conslist);
        },
        danxuan(data, list, dataall) {
            list.forEach((item) => {
                if (data.relyOn && data.relyOn.indexOf(item.key) > -1) {
                    console.log('进来没哦')
                    item.checked = true
                }
                if (item.relyOn && item.relyOn.indexOf(data.key) > -1 && !data.checked) {
                    item.checked = false
                }
            })
            // -1 全选
            let status = dataall.permission.findIndex(item => item.checked == false)
            let key = data.key
            console.log(key, status, '获取节点被选中的', this.$refs.tree.getCurrentKey(), this.$refs.tree.getCurrentNode())
            this.$refs.tree.setChecked(key, status == -1 ? true : false) //设置节点是否被选中
            this.$emit('update:modelValue', this.conslist);
        },
        bianli(data) {
            if (this.checkbox) {
                data.forEach(item => {
                    if (item.children && item.checked) {
                        this.defaultArr.push(item.key)
                    }
                    // if(item.children && !item.checked)
                    //     item.children.forEach(bb => {
                    //         this.bianli(bb)
                    //     })
                    if (item.permission && item.checked) {
                        this.defaultArr.push(item.key)
                    }
                })
            } else {
                this.conslist = this.permissionsHander(data)
            }
        },
        permissionsHander(_permission) {
            let data = [];
            _permission.forEach(ele => {
                if (ele.checked || ele.indeterminate) {
                    if (ele.children) {
                        let _children = this.permissionsHander(ele.children)
                        if (!_children) {
                            delete ele['children']
                        } else {
                            ele.children = _children
                        }
                    }
                    if (ele.permission) {
                        let _permission = this.permissionsHander(ele.permission)
                        if (!_permission) {
                            delete ele['permission']
                        } else {
                            ele.permission = _permission
                        }
                    }
                    data.push(ele)
                }
            });
            return data
        }
    },
}
</script>
